<script setup lang="tsx" name="XtxTabs">
import { provide, toRefs, useSlots } from 'vue'

//1.通过useSlots可以获取到当前组件所有的插槽
const slots = useSlots()
// console.log(slots) //proxy
// 5.支持v-model属性，要接收一个modelValue
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:modelValue', 'tab-click'])
//6. 当点击tab栏进行切换时：给每个a标签注册点击事件，并传参item
//7.并且给a标签动态添加属性active控制高亮--即判断传过来的modelValue值是否等于item的name值
const clickFn = (item: any, index: number) => {
  //   console.log(item.props.name) //数组[{},{}]
  emit('update:modelValue', item.props.name)
  //   10.tab栏支持点击事件,并将每一项和对应下标传出去，使在父组件里能拿到
  emit('tab-click', item, index)
}

/*8.控制对应栏内容的显示，需要将modelValue传给下面的子组件tab-pane，
但是由于子组件tabs-pane并不写在这个父组件里面，所以传值只能用依赖注入的方式传值*/
// 且需要传响应式的值
const { modelValue } = toRefs(props)
provide('activeNameValue', modelValue)

const Tabs = () => {
  // 2.获取slots中的默认插槽的内容
  const arr = (slots as any).default?.()
  //   console.log(panes) //默认插槽

  // 9.支持静态写的tab-pane和v-for循环出来的
  const panes: any[] = []
  arr.forEach((item: any) => {
    //  ① 判断当type的name为'XtxTabsPane'时，就是静态写上的子组件，直接放到panes数组中
    if (item.type.name === 'XtxTabsPane') {
      panes.push(item)
    } else {
      // ② 当有children节点时，遍历孩子节点，push到panes中去
      if (item.children) {
        item.children.forEach((panel: any) => {
          panes.push(panel)
        })
      }
    }
  })

  // 3.根据panes数组长度动态生成a标签，渲染label属性
  const navs = (
    <nav>
      {panes?.map((item, index) => {
        return (
          <a
            href="javascript:;"
            onClick={() => clickFn(item, index)}
            class={{ active: props.modelValue === item.props?.name }}
          >
            {item.props?.label}
          </a>
        )
      })}
    </nav>
  )
  //  4.将整个Tabs生成的虚拟dom返回出去
  return <div class="xtx-tabs">{[navs, panes]}</div>
}
</script>

<template><Tabs></Tabs></template>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
